<template>
	<div class="home">
		<home-header class="header" />
		<list class="list" />
		<home-footer class="footer" />
	</div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

import HomeHeader from './header.vue'
import HomeFooter from './footer.vue'
import List from './list.vue'

export default defineComponent({
	name: 'home',
	components: {
		HomeHeader,
		HomeFooter,
		List
	},

	directives: {
		tap: {
			mounted(el, binding) {
				console.log(el, binding)
				let downtime = 0
				el.addEventListener('touchstart', () => {
					downtime = new Date().getTime()
				})
				el.addEventListener('touchmove', () => {
					downtime = 0
					return
				})
				el.addEventListener('touchend', () => {
					if (downtime <= 0) return
					const val = new Date().getTime() - downtime
					if (val > 500) {
						binding.value.long()
					} else {
						binding.value.click()
					}
				})
			}
		}
	}
})
</script>

<style lang="less" scoped>
.home {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	.header {
		flex: none;
	}
	.list {
		flex: 1;
		overflow-y: auto;
	}
	.footer {
		flex: none;
	}
}
</style>
